<template>
  <div ref="net_sec" class="net-sec"  style="width: 100%;height: 86%;"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from 'vuex';
export default {
  data() {
    return {
      chartInstance: null,
      allData:null
    };
  },
  computed: {
...mapState(['theme'])
  },
  methods: {
    initChart() {
      // 初始化对象
     this.chartInstance = echarts.init(this.$refs.net_sec,this.theme);
      let option = {
        color: ["#FACC29", "#00E1E4","#FF3535","#365EFF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          bottom: "1%",
          textStyle: {
                color: "rgba(255,255,255,0.5)",
              },
        },

        grid: {
          left: "3%",
          right: "2%",
          bottom: "20%",
          top:'6%',
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["04-01", "05-01", "06-01", "07-01", "08-01", "09-01", "10-01"],
            axisTick: {
              show: false,
            },
        axisLabel: {
              show: true, color: "rgba(255,255,255,0.5)",
  
            },
            axisLine: {
              show: false,
            },

          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "#1a1f6d",
                width: 1,
              },
            },
             axisLabel: {
              show: true, color: "rgba(255,255,255,0.5)",
  
            },
          },
        ],

        series: [
          {
            symbol: "circle",
            name: "Line 1",
            type: "line",
            smooth: false,
            itemStyle: {
              color: "#FACC29",
            },

            showSymbol: false,
            emphasis: {
              focus: "series",
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            symbol: "circle",
            name: "Line 2",
            type: "line",
            smooth: false,
            itemStyle: {
              color: "#00E1E4",
            },

            showSymbol: false,
            emphasis: {
              focus: "series",
            },
            data: [120, 282, 111, 234, 220, 340, 310],
          },
          {
            symbol: "circle",
            name: "Line 3",
            type: "line",
            smooth: false,
            itemStyle: {
              color: "#FF3535",
            },

            showSymbol: false,
            emphasis: {
              focus: "series",
            },
            data: [340, 332, 181, 164, 10, 140, 220],
          },
          {
            symbol: "circle",
            name: "Line 4",
            type: "line",
            smooth: false,
            itemStyle: {
              color: "#365EFF",
            },

            showSymbol: false,
            emphasis: {
              focus: "series",
            },
            data: [240, 132, 131, 164, 190, 240, 200],
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData(){
      this.allData={

      }
    },
    updateChart(){

    }
  },
  mounted() {
    this.initChart();
        // 添加随页面变化而变化
    window.addEventListener('resize', () => {
       this.chartInstance.resize()
    })
  },
      destroyed () {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
      watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose()
      this.initChart()

    }
  },
};
</script>

<style lang="scss" scoped>
.net-sec {
  width: 100%;
  height: 86%;
}
</style>
